<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
    <script type="text/javascript" src="../../js/dayjs.min.js"></script>

</head>
<body>
    <div id="root">
        <!-- moment、dayjs 时间类库 -->
        <h4>格式化后的时间</h4>
        <!-- 计算属性实现 -->
        <h5>现在的时间：{{fmtTime}}</h5>
         <!-- methods 实现 -->
        <h5>现在的时间：{{getFmtTime()}}</h5>
          <!-- 过滤器 实现 -->
        <h5>现在的时间：{{time | timeFormter}}</h5>
          <!-- 过滤器 实现 -->
        <h5>现在的时间：{{time | timeFormter('YYYY_MM_DD')}}</h5>
          <!-- 多个过滤器-->
        <h5>现在的时间：{{time | timeFormter('YYYY_MM_DD') | mySlice }}</h5>
   
        <h3 :x="msg">hello</h3>
        <h4>{{msg | mySlice}}</h4>
    </div>

    <script type="text/javascript">
        Vue.config.performance = false;
        // 全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

        const vm = new Vue({
            el:'#root',
            data:{
                time:1639200711000,
                msg:'你好，世界',
            },
            computed:{
                fmtTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods:{
                getFmtTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            // 局本过滤器
            filters:{
                timeFormter(value,str='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(str)
                },
               /*  mySlice(value){
                    return value.slice(0,4)
                } */
            }
        })

    </script>

</body>
</html>